@extends('admin/layout/master')
@section('content')

    <h2>账户设置</h2>

    <div>
        <el-tabs v-model="currentTab" @tab-click="handleTabClick">
            <el-tab-pane label="账号列表" name="normal"></el-tab-pane>
            <el-tab-pane label="回收站" name="deleted"></el-tab-pane>
        </el-tabs>
    </div>

    <div class="container">

        <div align="right">
            <el-button type="primary" @click="add" size="mini"><i class="iconfont icon-add"></i> 创建账号</el-button>
        </div>
        
        <el-table
            :data="items"
            style="width: 100%"
            v-loading="loading">
            <el-table-column
                    prop="username"
                    label=用户名
                    width="180">
            </el-table-column>
            <el-table-column
                    label="角色"
                    width="180"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.role">@{{ scope.row.role.name }}</el-tag>
                    <el-tag type="success" v-if="scope.row.is_super">超级管理员</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1">正常</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 0">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <template v-if="!scope.row.is_super && currentTab !== 'deleted'">

                        <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
                        <el-popover
                                placement="bottom"
                                width="160"
                                v-model="scope.row._visibleDeleteConfirm">
                            <p>确定移除除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="scope.row._visibleDeleteConfirm = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="destroy(scope.row.id);scope.row._visibleDeleteConfirm = false">确定</el-button>
                            </div>
                            <el-button slot="reference" size="small" type="danger">移除</el-button>
                        </el-popover>

                    </template>
                    <template v-if="currentTab === 'deleted'">
                        <el-button type="danger" size="small" @click="restore(scope.row.id)">恢复</el-button>
                    </template>

                </template>
            </el-table-column>
        </el-table>

    <el-pagination
            ref="mainPage"
            background
            class="pagination"
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
    @current-change="setPage"
    @prev-click="setPage"
    @next-click="setPage"
    >
    </el-pagination>

    </div>

    <el-dialog
            title="账号管理"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false"
            >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="绑定手机号">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="form.role_id" placeholder="请选择">
                    <el-option
                            v-for="item in role"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客服工号">
                <el-input v-model="form.kefu_no"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch
                        v-model="form.status"
                        active-color="#13ce66"
                        inactive-color="#999"
                        >
                </el-switch>
            </el-form-item>
        </el-form>


    <div style="text-align: center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </span>
    </el-dialog>

@stop
@section('javascript')
    <script src="{{mix('/js/manifest.js', 'assets')}}"></script>
    <script src="{{mix('/js/vendor.js', 'assets')}}"></script>
    <script src="{{mix('/js/admin.auth.user.js', 'assets')}}"></script>
@stop